import 'dart:ui';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_app/colors/my_colors.dart';
import 'package:flutter_app/my_text.dart';

import '../screen_page.dart';

class BigCirclePage extends StatefulWidget {
  @override
  _BigCirclePageState createState() => _BigCirclePageState();
}

class _BigCirclePageState extends State<BigCirclePage> {
  ScrollController _scrollController;
  TabController tabController;

  @override
  void initState() {
    super.initState();
    _scrollController = ScrollController();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        height: double.infinity,
        child: Stack(
          children: <Widget>[
            Image.network(
              "https://image.xiajiucai.com/billionbottle/activity/20"
              "20_05_23_b5d94838_99ba_4153_8437_375a0bfa566e_702x264.png",
              width: double.infinity,
              height: height(200),
              fit: BoxFit.cover,
            ),
            Container(
              height: height(200),
              width: double.infinity,
              color: MyColors.black_bright_bg,
            ),
            SafeArea(
                child: Column(
              children: <Widget>[
                SizedBox(height: height(45)),
                Text(
                  "这个是标题",
                  style: TextStyle(color: Colors.white),
                ),
                SizedBox(height: height(10)),
                Text(
                  "这个是副标题",
                  style: TextStyle(color: Colors.white),
                ),
                SizedBox(height: height(10)),
                Text(
                  "这个是描述",
                  style: TextStyle(color: Colors.white),
                ),
              ],
            )),
            CustomScrollView(
              controller: _scrollController,
              slivers: <Widget>[
                SliverAppBar(
                  expandedHeight: height(150),
                  backgroundColor: Colors.transparent,
                  pinned: true,
                  title: Container(
                    width: double.infinity,
                    height: height(150),
                  ),
                ),
                SliverPersistentHeader(
                  pinned: true,
                  delegate: MySliverPersistentHeaderDelegate(),
                ),
                SliverGrid(
                  gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                    maxCrossAxisExtent: 300.0,
                    mainAxisSpacing: 10.0,
                    crossAxisSpacing: 10.0,
                    childAspectRatio: 1.5,
                  ),
                  delegate: SliverChildBuilderDelegate(
                    (BuildContext context, int index) {
                      return Container(
                        alignment: Alignment.center,
                        color: Colors.teal[100 * (index % 9)],
                        child: Text('grid item $index'),
                      );
                    },
                    childCount: 20,
                  ),
                )
              ],
            ),
          ],
        ),
      ),
    );
  }
}

class MySliverPersistentHeaderDelegate extends SliverPersistentHeaderDelegate {
  @override
  Widget build(BuildContext context, double shrinkOffset,
      bool overlapsContent) {
    return Container(
      width: double.infinity,
      height: height(116),
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(width(10)),
              topRight: Radius.circular(width(10)))),
      padding: EdgeInsets.only(
          left: width(12), right: width(12), top: width(16), bottom: width(20)),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(MyText.bigCircleDescribe,
              style: TextStyle(fontSize: sp(12), color: MyColors.color_999999))
        ],
      ),
    );
  }

  @override
  double get maxExtent => height(116);

  @override
  double get minExtent => height(116);

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) =>
      false; // 如果内容需要更新，设置为true
}
